<template>
  <div class="pagination" v-if="totalPages > 1">
    <button 
      class="pagination-btn"
      :disabled="currentPage === 1"
      @click="changePage(1)"
    >
      <i class="fas fa-angle-double-left"></i>
    </button>
    
    <button 
      class="pagination-btn"
      :disabled="currentPage === 1"
      @click="changePage(currentPage - 1)"
    >
      <i class="fas fa-angle-left"></i>
    </button>

    <div class="pagination-pages">
      <button
        v-for="page in visiblePages"
        :key="page"
        :class="['pagination-page', { active: page === currentPage }]"
        @click="changePage(page)"
      >
        {{ page }}
      </button>
    </div>

    <button 
      class="pagination-btn"
      :disabled="currentPage === totalPages"
      @click="changePage(currentPage + 1)"
    >
      <i class="fas fa-angle-right"></i>
    </button>

    <button 
      class="pagination-btn"
      :disabled="currentPage === totalPages"
      @click="changePage(totalPages)"
    >
      <i class="fas fa-angle-double-right"></i>
    </button>

    <div class="pagination-info">
      <span>共 {{ total }} 条</span>
      <select 
        v-model="localPageSize" 
        @change="handlePageSizeChange"
        class="page-size-select"
      >
        <option :value="10">10条/页</option>
        <option :value="20">20条/页</option>
        <option :value="50">50条/页</option>
        <option :value="100">100条/页</option>
      </select>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue'

const props = defineProps({
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  total: {
    type: Number,
    required: true
  },
  maxVisiblePages: {
    type: Number,
    default: 7
  }
})

const emit = defineEmits(['update:currentPage', 'update:pageSize', 'change'])

const localPageSize = ref(props.pageSize)

// 计算总页数
const totalPages = computed(() => {
  return Math.ceil(props.total / props.pageSize)
})

// 计算可见的页码
const visiblePages = computed(() => {
  const pages = []
  const total = totalPages.value
  const current = props.currentPage
  const max = props.maxVisiblePages

  if (total <= max) {
    // 总页数小于最大可见页数，显示所有页码
    for (let i = 1; i <= total; i++) {
      pages.push(i)
    }
  } else {
    // 总页数大于最大可见页数，智能显示
    const half = Math.floor(max / 2)
    let start = current - half
    let end = current + half

    if (start < 1) {
      start = 1
      end = max
    }

    if (end > total) {
      end = total
      start = total - max + 1
    }

    for (let i = start; i <= end; i++) {
      pages.push(i)
    }
  }

  return pages
})

// 切换页码
const changePage = (page) => {
  if (page < 1 || page > totalPages.value || page === props.currentPage) {
    return
  }
  emit('update:currentPage', page)
  emit('change', page, props.pageSize)
}

// 改变每页显示数量
const handlePageSizeChange = () => {
  emit('update:pageSize', localPageSize.value)
  emit('update:currentPage', 1) // 重置到第一页
  emit('change', 1, localPageSize.value)
}

// 同步 pageSize
watch(() => props.pageSize, (newVal) => {
  localPageSize.value = newVal
})
</script>

<style scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  flex-wrap: wrap;
}

.pagination-btn,
.pagination-page {
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 2px solid #e0e0e0;
  background: white;
  color: #555;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-btn:hover:not(:disabled),
.pagination-page:hover:not(.active) {
  border-color: #3498db;
  color: #3498db;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(52, 152, 219, 0.2);
}

.pagination-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.pagination-pages {
  display: flex;
  gap: 6px;
}

.pagination-page.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: #667eea;
  color: white;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.pagination-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 10px;
  padding-left: 15px;
  border-left: 2px solid #e0e0e0;
  color: #7f8c8d;
  font-size: 14px;
}

.page-size-select {
  padding: 6px 10px;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  background: white;
  color: #555;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.page-size-select:hover {
  border-color: #3498db;
}

.page-size-select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pagination {
    gap: 6px;
    padding: 15px;
  }

  .pagination-btn,
  .pagination-page {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 13px;
  }

  .pagination-info {
    width: 100%;
    justify-content: center;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px solid #e0e0e0;
  }

  .pagination-pages {
    gap: 4px;
  }
}
</style>
